<script setup>
import { ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue'
import ArticleSelect from './components/ArticleSelect.vue';
import { artGetListService, artRemoveArticle } from '@/api/article.js'
import { formatTime } from '@/utils/format.js'
import ArticleEdit from './components/ArticleEdit.vue';
import ArticleView from './components/ArticleView.vue';
const loading = ref(false)
const artViewRef = ref()
const drawRef = ref()
const total = ref(0)
const params = ref({
    pagenum: 1,
    pagesize: 5,
    cate_id: null,
    state: ''
})
const articleList = ref([])
const getArticleList = async () => {
    loading.value = true
    const res = await artGetListService(params.value)
    articleList.value = res.data.data
    total.value = res.data.total
    loading.value = false
}
getArticleList()

// 分页
const onSizeChange = (size) => {
    // console.log("当前条数：", size);
    // 只要每页条数发生变化，重置到第一页显示（原本访问的页码数据将会发生大变化）
    params.value.pagenum = 1
    params.value.pagesize = size
    // 重新渲染，更新数据
    getArticleList()

}
const onCurrentChange = (page) => {
    // console.log("当前页码", page);
    params.value.pagenum = page
    getArticleList()

}

// 搜索功能
const onSerch = () => {
    // 搜索功能 重置到第一页面
    params.value.pagenum = 1
    getArticleList()
}
// 重置功能
const onReset = () => {
    params.value.pagenum = 1
    params.value.cate_id = ''
    params.value.state = ''
    getArticleList()
}
// 添加文章
const onAddArticle = () => {
    drawRef.value.open({})
}
// 编辑文章
const onEditArticle = (row) => {
    drawRef.value.open(row)
}
// 删除文章
const onRemoveArticle = async (row) => {
    await ElMessageBox.confirm(
        '你确认删除该文章信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    await artRemoveArticle(row.id)
    ElMessage.success('删除成功')
    getArticleList()
}
// 添加成功
const onSuccess = (type) => {
    if (type === 'add') {
        // 添加，渲染最后一页
        const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
        // 更新成最大页码数，再渲染
        params.value.pagenum = lastPage
        getArticleList()
    } else {
        // 编辑，渲染当前页
        getArticleList()
    }

}
// 打开文章预览
const openViewArticle = (row) => {
    artViewRef.value.open(row)
}
</script>

<template>
    <page-container title="文章管理">
        <!-- 具名插槽的使用 -->
        <template #extra>
            <el-button type="primary" @click="onAddArticle">添加文章</el-button>
        </template>
        <!-- 主题内容直接写  因为有默认插槽 -->
        <el-form inline>
            <el-form-item label="文章分类" style="width: 220px">
                <!-- 封装成组件 -->
                <ArticleSelect v-model="params.cate_id"></ArticleSelect>
            </el-form-item>
            <el-form-item label="文章状态" style="width: 220px">
                <el-select placeholder="请选择" v-model="params.state">
                    <el-option label="已发布" value="已发布"></el-option>
                    <el-option label="草稿" value="草稿"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="width: 220px">
                <el-button type="primary" @click="onSerch">搜索</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="articleList" v-loading="loading">
            <el-table-column label="文章标题" prop="title">
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="openViewArticle(row)">{{ row.title }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="分类" prop="cate_name"></el-table-column>
            <el-table-column label="发表时间" prop="pub_date">
                <template #default="{ row }">
                    {{ formatTime(row.pub_date) }}
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button plain circle :icon="Edit" type="primary" @click="onEditArticle(row)"></el-button>
                    <el-button plain circle @click="onRemoveArticle(row)" :icon="Delete" type="danger"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <!-- 分页器 -->

        <el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize"
            :page-sizes="[2, 3, 5, 10]" :background="true" layout="jumper, total, sizes, prev, pager, next "
            :total="total" @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px;justify-content: flex-end;" />

        <ArticleEdit ref="drawRef" @success="onSuccess"></ArticleEdit>
        <!-- 文章预览 -->
        <ArticleView ref="artViewRef"></ArticleView>

    </page-container>


</template>